import { memo, useRef, useState, useEffect } from 'react'
import { Form, InputNumber, Switch, message } from 'antd'
import { useSelector } from 'react-redux'
import bus from '../../../../utils/eventBus'
import './index.scss'
const SystemParameter = () => {
    const { version = '', effectiveTime = '', endDateTime = '', machineID = '', isExpire = false } = useSelector((state: any) => state.licenseInfoReducer.licenseInfo)
    const formRef = useRef<any>(null)
    const handleImport = () => {
        window.chromePro.importAuthorizeFile();
    }
    const formChange = (changeValue: any, allValue: any) => {
        const { countDown, loginPhoto, countDownOpen } = formRef.current.getFieldValue()
        if (!countDown) {
            message.warning('倒计时不能为空')
            return
        }
        const params = {
            countDownOpen: countDownOpen ? 1 : 0,
            countDownNum: countDown,
            loginPhoto: loginPhoto ? 1 : 0
        }
        if (countDownOpen) {
            bus.emit('startCountDownNum', countDown)
        } else {
            bus.emit('closeCountDown')
        }
        window.chromePro.modConfig(JSON.stringify(params))
    }
    const getConfigFinished = (data: any) => {
        if (data.code === 200) {
            formRef.current.setFieldsValue({
                countDownOpen: !!data.countDownOpen,
                countDown: data.countDownNum,
                loginPhoto: data.loginPhoto ? true : false
            })
        }
    }
    const importAuthorizeFileFinished = (data: any) => {
        if (data.code === 200) {
            window.chromePro.checkAuthorizeFile();
        } else {
            message.error(data.msg);
        }
    }
    useEffect(() => {
        window.chromePro.getConfig();
        bus.addListener("getConfigFinished", getConfigFinished);
        bus.addListener("importAuthorizeFileFinished", importAuthorizeFileFinished);
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener("importAuthorizeFileFinished", importAuthorizeFileFinished);
            bus.removeListener("getConfigFinished", getConfigFinished);
        }
    }, [])
    return (
        <>
            <Form className="parameter-box" ref={formRef} onValuesChange={formChange}>
                <div className="tips-text">
                    <span className="main-text">关于文印</span>
                    <div className="main-box">
                        {
                            isExpire ?
                                <>
                                    <span>当前版本V{version}；授权{
                                        effectiveTime
                                    }有效期至{endDateTime.slice(0, 10)}，过期请联系售后使用机器码重新
                                        <span style={{ color: '#81d3ff' }} onClick={handleImport}>导入授权</span> 使用。</span>
                                </> :
                                <>
                                    <span>当前版本V{version}；无授权，请联系售后使用机器码重新
                                        <span style={{ color: '#0e7de9' }} onClick={handleImport}>导入授权</span> 使用。</span>
                                    <span style={{ color: 'rgba(142, 142, 147, 100)', fontSize: '14px' }}>本机机器码：{machineID}</span>
                                </>
                        }
                    </div>
                </div>

                <div className="count-down">
                    <div className="header">
                        倒计时
                        <Form.Item name="countDownOpen" valuePropName='checked'>
                            <Switch></Switch>
                        </Form.Item>
                    </div>
                    <div className="main-box">
                        <span style={{ color: '#848484', fontSize: '14px' }}>开启后默认倒计时60秒，可设置10-100秒之间</span>
                        <div className="count-input">
                            <div className='countDownBox'>
                                <span>倒计时退出</span>
                                <Form.Item name="countDown">
                                    <InputNumber precision={0} min={10} max={100} controls={false}></InputNumber>
                                </Form.Item>
                                <span style={{ fontSize: '14px', color: '#333333' }}>秒</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="count-down">
                    <div className="header">
                        认证拍摄
                        <Form.Item name="loginPhoto" valuePropName='checked'>
                            <Switch></Switch>
                        </Form.Item>
                    </div>
                    <div className="main-box" style={{ height: '60px' }}>
                        <div className="count-input" style={{ marginTop: '0px' }}>
                            <span>认证时摄像拍照记录</span>
                        </div>
                    </div>
                </div>
            </Form>
        </>
    )
}
export default memo(SystemParameter)